<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">

        let obj = {
            "group": [
                "1组", "2组", "3组",
                "4组", "5组", "6组", "7组", "8组", "9组", "11组", "14组"
            ],
            "avgScore": [68, 72, 64, 80, 65, 71, 75, 60, 0, 0, 0],
            "lt60": [1, 0, 1, 0, 2, 2, 0, 3, 0, 0, 0],
            "gt60": [2, 3, 4, 1, 2, 2, 4, 2, 0, 0, 0
            ],
            "gt80": [2, 1, 0, 4, 1, 2, 1, 1, 0, 0, 0
            ]
        }

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 3.2 指定图表的配置项和数据

        let option = {
            // 网格（整个图表区域设置）
            grid: {
                top: 30, bottom: 30, left: '7%', right: '7%'
            },
            // 提示框组件,不做修改
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross', // 十字标线, 有x轴先的阴影不明显
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            // 工具栏组件不需要,删除即可
            // toolbox: {},
            // 图例组件,删除里面的data
            legend: {
                // data: ['Evaporation', 'Precipitation', 'Temperature']
            },
            xAxis: [
                {
                    type: 'category',
                    data: obj.group,
                    axisPointer: {
                        type: 'shadow' // 鼠标放到x轴元素上,出现阴影
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value', // 删除了name属性,没有用到
                    min: 0, // 最小值
                    max: 100, // 最大值
                    interval: 10, // 间隔
                    axisLabel: {
                        formatter: '{value}分'  // 显示内容格式化
                    }
                },
                {
                    type: 'value',// 删除了name属性,没有用到
                    min: 0,// 最小值
                    max: 10, // 最大值
                    interval: 1, // 间隔
                    axisLabel: {
                        formatter: '{value}人' // 显示内容格式化
                    }
                }
            ],
            series: [
                {
                    name: '平局分',
                    type: 'bar',
                    barWidth: 15, // 设置柱子宽度
                    yAxisIndex: 0,// 0是第一个Y轴,1是第二个Y轴
                    // 单个元素可以单独处理提示框 tooltip, 当前不需要,所以删除
                    data: obj.avgScore
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    barWidth: 15, // 设置柱子宽度
                    yAxisIndex: 1, // 0是第一个Y轴,1是第二个Y轴
                    // 单个元素可以单独处理提示框 tooltip, 当前不需要,所以删除
                    data: obj.lt60
                },
                {
                    name: '60到80分之间',
                    type: 'bar',
                    barWidth: 15, // 设置柱子宽度
                    yAxisIndex: 1,// 0是第一个Y轴,1是第二个Y轴
                    // 单个元素可以单独处理提示框 tooltip, 当前不需要,所以删除
                    data: obj.gt60
                },
                {
                    name: '高于80分人数',
                    type: 'bar',
                    barWidth: 15, // 设置柱子宽度
                    yAxisIndex: 1,// 0是第一个Y轴,1是第二个Y轴
                    // 单个元素可以单独处理提示框 tooltip, 当前不需要,所以删除
                    data: obj.gt80
                }
            ]
        }


        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>